<template>
  <div class="">
    <!--    顶部导航条-->
    <navheader></navheader>
<!--    主体内容-->
    <div class="main" style="margin-top:60px;">
<!--      上边背景图-->
      <div class="father">
        <img class="child" :src="other_img.back" alt="...">
      </div>
<!--      下边具体积分物品-->
      <div class="info_main">
        <div class="main" style="padding-top:90px;margin-bottom: -100px">
          <div class="row mt-4" >
<!--            公告-->
            <div class="notice-box mb-4" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
              <transition name="notice-slide">
                <p class="notice-item" :key="noticeList.id">
                  {{ noticeList.text }}
                </p>
              </transition>
            </div>
            <div class="col-md-12 column" >
              <div class="card" style="height: 1600px;">
                <!-- Tab panes -->
                <div class="card-body">
                  <!--    下拉菜单选项-->
                  <div class="border-bottom pb-2 pt-3">
                    <div class="row ml-5 pb-3">
                      <!--        积分物品类型-->
                      <div id="col_type" class="">
                        <span class="fontClass pl-3">积分物品类型：</span>
                        <el-cascader
                            size="large"
                            :options="options_type"
                            v-model="selectType"
                            placeholder="选择物品类型..."
                            clearable
                            filterable
                        >
                        </el-cascader>
                      </div>
                      <!--        要求积分-->
                      <div id="city">
                        <span class="ml-5" style="font-size: 20px">积分：</span>
                        <el-input-number v-model="selectSco1" @change="handleChange" :min="0" :max="5000" label="积分"></el-input-number>
                        ——
                        <el-input-number v-model="selectSco2" @change="handleChange" :min="0" :max="5000" label="积分"></el-input-number>
                      </div>
                      <span class="input-group-btn pl-5">
                        <el-button type="" icon="el-icon-search" @click="findBySelect()">搜索</el-button>
                        <el-button type="" @click="clearSelect()">重置</el-button>
                      </span>
                      <span class="ml-5" style="text-align: right;">
                        <el-button @click="openDraw" type="warning" style="margin-left: 16px;" plain>
                        积分排行榜
                      </el-button>
                      </span>
<!--                      积分排行榜内容-->
                      <el-drawer
                          title="我是标题"
                          :visible.sync="drawer"
                          :with-header="false">
                        <h2 class="text-center pt-3" style="color:#8c0615;font-weight: bold">
                          <i class="el-icon-medal-1"></i>积分排行榜(前十)
                        </h2>
                        <div v-for="(grade,i) in userlist" :key=i class="text item border-bottom pb-2 pt-4 pl-3">
                          <div class="row">
                            <el-tooltip class="item" effect="dark" placement="right">
                              <div class="one_user pl-3">
                                <p class="mb-1">第{{i+1}}：
                                  <span style="color: #333333">{{grade.user_name}}</span>
                                  <span style="color: #5b5b5b;font-size: 16px" class="pl-5">{{grade.credit}}分</span>
                                </p>
                              </div>
                              <div slot="content" class="p-2">
                                <span style="font-size: 12px" v-if="grade.identity==0">身份：学生</span>
                                <span style="font-size: 12px" v-else-if="grade.identity==1">身份：学长学姐</span>
                                <span style="font-size: 12px" v-else-if="grade.identity==2">身份：老师</span>
                                <div class="user_btn btn ml-3" type="btn" @click="change_user(grade.user_id)">详细信息</div>
                              </div>
                            </el-tooltip>
                          </div>
                        </div>
                      </el-drawer>
                    </div>
                  </div>
<!--                  具体info-->
                  <div class="panel panel-default">
                    <!-- Default panel contents -->
                    <div class="panel-body">
                      <!-- 文件项 -->
                      <div class="row" v-if="show_info.length>0">
                        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 p-1" v-for="(credits) in show_info" :key=credits.credit_item_id>
                          <div class="thumbnail">
                            <div class="imgHeight">
                              <img :src="'/api/storage/credit_img/'+credits.credit_item_img"
                                   style="width:100%;height:95%;object-fit:contain;"  alt="...">
                            </div>
                            <div class="caption">
                              <div style="text-align: center;color: #6b6e71" class="capChild">
                                <a class="name" style="font-weight: bold;font-size: 25px;" href="javascript:void(0);">{{credits.credit_item_name}}</a>
                                <p class="pt-1">
                                  <span style="color: black">积分物品类型：</span>
                                  <span v-if="credits.credit_item_type==1">生活</span>
                                  <span v-else-if="credits.credit_item_type==2">文具</span>
                                  <span v-else-if="credits.credit_item_type==3">运动</span>
                                  <span v-else-if="credits.credit_item_type==4">阅读</span>
                                  <span v-else-if="credits.credit_item_type==5">其他</span>

                                  <span class="pt-2" style="color: black"><br/>积分：</span><span>{{credits.credit_item_req_credit}}</span>

                                  <span class="pt-2" style="color: black"><br/>库存：</span><span>{{credits.credit_item_stock}}</span>

                                  <span class="pt-2" style="color: black"><br/>描述：</span><span>{{credits.credit_item_info}}</span>

                                </p>
                                <!--                    搜索框-->
                                <el-button>我想要</el-button>
                              </div>
                            </div>

                          </div>
                        </div>
                      </div>
                      <div class="noFile" v-else>
                        <img :src="imgs.noInfo" alt="...">
                        <h2>{{this.nullContainer}}</h2>
                      </div>
                    </div>

                    <!--         分页 -->
                    <div class="mt-4 mb-4 panel-footer" style="text-align:center;">
                      <el-pagination
                          @current-change="handleCurrentChange"
                          :current-page="creditContainerPage"
                          :page-size="creditContainerSize"
                          layout="total,prev, pager, next"
                          :total="total">
                      </el-pagination>
                    </div>

                  </div>


                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--    底部导航条-->
    <myfooter></myfooter>
  </div>
</template>

<script>
import myfooter from '../../myfooter'
import navheader from '../../navheader'
import back from '@/assets/score/back.png'
import left_back from '@/assets/score/bottom_back.jpg'
import noInfo from '@/assets/noFile.png'
import Cookies from 'js-cookie'
import {getAllCreditInfo} from '@/api/Score'
import {getUserCreditList, judgeUser} from '@/api/User'


export default {
  name: "score_main",
  components:{
    myfooter,
    navheader
  },
  data() {
    return {
      drawer: false,
      nullContainer:"暂无数据~",
      activeIndex:'1',
      imgs: {
        noInfo
      },
      other_img:{
        back,
        left_back
      },
      //多级联选器
      showUserName: '',
      showUserScore: '',
      selectType:'',
      options_type:[
        {
          id:"1",
          name:"生活",
          label:"生活",
          value:1
        },
        {
          id:"2",
          name:"文具",
          label:"文具",
          value:2
        },
        {
          id:"3",
          name:"运动",
          label:"运动",
          value:3
        },
        {
          id:"4",
          name:"阅读",
          label:"阅读",
          value:4
        },
        {
          id:"5",
          name:"其他",
          label:"其他",
          value:5
        }
      ],
      selectSco1:0,
      selectSco2:0,

      //分页
      creditContainerPage:0, // 分页的数据：当前页数
      creditContainerSize:0, // 分页的数据：每页的数量
      total:0,

      //显示info  搜索容器
      show_info:[],
      copy_info:[],
      credit_info:[],
      credit_item_id:'',
      search_info:[], //存放搜索到的容器
      search_info_sort:[],
    //积分排行榜
      userlist:[],
      i:0,
      //公告
      noticeArr: [
        { title: '兑换积分物品请联系管理员，vx：admin1234' },
        { title: '签到+10分,发贴+5分,发布闲置物品信息+5分' },
        { title: '需通过审核才加分' },
      ],
      number: 0,

    }
  },
  computed: {
    noticeList() {
      return {
        id: this.number,
        text: this.noticeArr[this.number].title,
      };
      timer:nuul
    },
  },
  mounted() {
    this.scrollMove();
  },
  created() {
    let _this = this;

    _this.creditContainerPage=parseInt(1);

    _this.init();
  },
  methods:{
    //公告
    //滚动函数
    scrollMove() {
      this.timer = setTimeout(() => {
        if (this.number === this.noticeArr.length - 1) {
          this.number = 0;
        } else {
          this.number += 1;
        }
        this.scrollMove();
      }, 2000);
    },
    //鼠标进入
    mouseEnter() {
      clearInterval(this.timer);
    },
    //鼠标离开
    mouseLeave() {
      this.scrollMove();
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleChange(value) {
      console.log(value);
    },
    //获取所有积分物品信息
    init(){

      getAllCreditInfo({}).then(res=>{
          this.credit_info=res.data.data;
          this.copy_info=res.data.data;
          this.getShowCredit();
      });

    },
    openDraw(){
      this.drawer=true;
      getUserCreditList({}).then(res=>{
        this.userlist=res.data.userlist;
      })
    },
    //跳转个人中心
    change_user(user_id){

      //判断此用户id是否为当前登录用户
      judgeUser({
        user_id:user_id,
        // token:window.sessionStorage.getItem('token')
      }).then(res => {
        //该用户是当前登录用户，跳转个人中心
        if(res.data.code==1){

          if(this.$router.history.current.path !='/Personal/Person_Note'){
            this.$router.push({path:'/Personal/Person_Note'});
          }
        }
        else{

          if(this.$router.history.current.path !='/User_Main/User_Note') {
            this.$router.push({
              path: '/User_Main/User_Note',
              query: {user_id: user_id}
            });
          }
        }
      });


    },
    //分页
    getShowCredit(){

      this.creditContainerSize=parseInt(12);
      this.show_info = this.credit_info.slice((this.creditContainerPage - 1) * this.creditContainerSize, this.creditContainerPage * this.creditContainerSize);
      this.total=parseInt(this.credit_info.length);

    },
    //清空多级联框
    clearSelect(){
      this.selectType="";
      this.selectSco1=0;
      this.selectSco2=0;
      this.init();
    },
    //根据积分物品类型和积分搜索
    findBySelect(){

      if(this.selectType==0&&this.selectSco1==0&&this.selectSco2==0){
        this.$msg.error('请选择积分物品类型或积分！');
        this.init();
      }
      else if(this.selectSco1>this.selectSco2 && this.selectType==0){
        this.$msg.error('请输入正确的积分范围！');
        this.init();
      }
      else{
        //执行本地过滤
        var search_list=this.copy_info;
        this.search_info_sort=[];  //装搜索结果的容器
        for(let i=0;i<search_list.length;i++)
        {
          if(this.selectType.length!=0&&this.selectSco2!=0)  //既选择了类型，也选择了积分范围
          {
            if(search_list[i].credit_item_type==this.selectType)
            {
              if(search_list[i].credit_item_req_credit >= this.selectSco1 && search_list[i].credit_item_req_credit<=this.selectSco2){
                this.search_info_sort.push(search_list[i]);
              }
            }
          }else if(this.selectType!=0&&this.selectSco2==0){   //只选择了类型
            if(search_list[i].credit_item_type==this.selectType)
            {
              this.search_info_sort.push(search_list[i]);
            }
          }else if(this.selectType==0&&this.selectSco2!=0){   //只有选择了积分范围
            if(search_list[i].credit_item_req_credit>=this.selectSco1 && search_list[i].credit_item_req_credit<=this.selectSco2){
              this.search_info_sort.push(search_list[i]);
            }
          }
        }
        if(this.search_info_sort.length==0)
        {
          this.nullContainer='未找到相关结果,刷新一下~';
          this.$msg.error('未找到相关结果,刷新一下~');
        }
        else
        {
          this.nullContainer='暂无数据~';
        }
        this.credit_info=this.search_info_sort;
        //分页
        this.creditContainerPage=parseInt(1);
        this.getShowCredit();

        //清空多级联框
        // this.selectType="";
        // this.selectSco2=0;
        // this.selectSco1=0;

      }
    },
    //page改变时的回调函数，参数为当前页码
    handleCurrentChange(val) {

      console.log(`当前页: ${val}`);
      this.creditContainerPage= parseInt(val);
      this.getShowCredit();
    },



  }
}
</script>

<style scoped>
/*最上边图片*/
/*.father{*/
/*  position: relative;*/
/*}*/
/*.child{*/
/*  display: block;*/
/*  height: 50rem;*/
/*  width: 50rem;*/
/*  border-radius: 10px;*/
/*}*/

/*下面部分盒子*/
.info_main {
  background: url('~@/assets/score/bottom_back.jpg') no-repeat center;
  background-size: cover;
  border-radius: 10px;
  /*width: 90rem;*/
  /*margin: 0 auto;*/
  /*display: block;*/
}

/*具体信息*/
.noFile{
  padding-top: 200px;
  margin: 0px auto;
  text-align: center;
  font-size: 50px;
  color: #6b6e71;
}
.panel-body{
  padding: 13px 15px 0px 15px;
}
.thumbnail{
  margin: 2px 0px 16px 0px;
  padding: 10px;
  /*border-style: solid;*/
  /*border-width:2px;*/
  /*border-color: #adb5bd;*/
  border-radius: 5px;
}
.thumbnail:hover{
  box-shadow: 0px 0.5px 10px #888888;
}

.thumbnail .caption  {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding: 5px 9px 5px 9px;
}
.thumbnail .imgHeight{
  height: 200px;
}
/*选项卡的字体*/
.fontClass{
  font-size:20px;
  font-family: Microsoft Yahei;
}
.one_user{
  font-size: 20px;
  font-weight: bold;
  color: black
}
.one_user:hover{
  color: #8d4353;
}
.user_btn{
  background-color: white;
  font-size: 12px;
  color:#3f7e74;
  font-weight: bold;
}
.user_btn:hover{
  background-color:#3f7e74;
  color:white;
}
/*滚动公告*/
.notice-box {
  width: 500px;
  height: 40px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.notice-item {
  width: 100%;
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  font-size: 24px;
  font-weight: bold;
  color: #152c5b;
}
.notice-slide-enter-active,
.notice-slide-leave-active {
  transition: all 0.8s linear;
}
.notice-slide-enter {
  top: 30px;
}
.notice-slide-leave-to {
  top: -30px;
}
</style>
